<template>
	<view>
		<view class="full" @click="closeFull"></view>
		
		<view class="login-out">
			<view><b>报警筛选条件</b></view>
			<view><b>日期范围</b></view>
			<view class="work-date" @click="showDate(true)">{{ start == '' ? '开始日期' : start }}<view class="fr"><image src="/static/img/date-icon.png" class="work-date-icon"></image></view></view>
			<view class="work-date" @click="showDate(false)">{{ end == '' ? '结束日期' : end }}<view class="fr"><image src="/static/img/date-icon.png" class="work-date-icon"></image></view></view>
			<view class="work-date">{{ level == '' ? '请选择' : level }}<view class="fr" @click="show_level = true"><image src="/static/img/date-icon.png" class="work-date-icon"></image></view></view>
			
			<view class="btn"><button class="cancel-btn" @click="reset"><b>重置</b></button><button class="default-btn fr" @click="ok"><b>确定</b></button></view>
		</view>
		
		<view class="full full2" v-show="show_date || show_picker"></view>
		<u-picker v-model="show_date" mode="time" :params="params" @confirm="setDate" @cancel="cancel"></u-picker>
		<u-select v-model="show_picker" :list="columns" label-name="text" @confirm="onConfirm" @cancel="cancel"></u-select>
	</view>
</template>

<script>
export default{
	data() {
		return {
			columns: [],
			currentDate : new Date(),
			start : '',
			end : '',
			level : '请选择',
			show_date : false,
			show_picker : false
		}
	},
	methods:{
		closeFull() {
			this.$emit('closeFull');
		},
		showDate(bol) {
			this.type = bol;
			this.show_date = true;
		},
		reset() {
			this.currentDate = new Date();
			this.start = '开始日期';
			this.end = '结束日期';
			this.type = '';
		},
		cancel() {
			this.show_date = false;
			this.show_level = false;
		},
		ok() {
			let obj = {
				start : this.start,
				end : this.end
			}
			this.$emit('closeFull',obj);
		},
		setDate(obj) {
			let str = obj.year+'/'+obj.month+'/'+obj.day;
			this.type ? this.start = str : this.end = str;
			this.cancel();
		},
		onConfirm(value, index) {
			console.log(`当前值：${value}, 当前索引：${index}`);
			this.cancel();
		}
	}
}
</script>

<style scoped>
	.login-out{
		padding: 26px 0 0 26px;
	}
	.login-out>view:nth-child(1){
		margin-bottom: 16px;
	}
	.login-out>view:nth-child(2){
		font-size: 14px;margin-bottom: 12px;
	}
	.work-date{
		line-height: 50px;border-bottom: 1px solid #d7d7d7;color: #3E3A39;font-size: 14px;padding-right: 27px;
	}
	.work-date-icon{
		width: 15px;height: 15px;vertical-align: middle;
	}
	.btn{
		position: absolute;width: 100%;bottom: 5%;left: 0;padding: 0 15px;
	}
	.default-btn,.cancel-btn{
		width: 47%;display: inline-block;
	}
	.full2{
		z-index: 99;
	}
	.login-out>.status{
		line-height: 26px;border: 1px solid rgba(62, 58, 57, 0.4);padding: 0 13px;box-sizing: border-box;border-radius: 6px;margin-bottom: 16px;margin-right: 10px;font-size: 12px;position: relative;color: rgba(62, 58, 57, 0.7);
	}
	.login-out>.on{
		border: 1px solid #307BE0;color: #307BE0;
	}
	.login-out>.on::after{
		content: '';position: absolute;bottom: 0;right: -2px;background: url('/static/img/alarm-lv.jpg') no-repeat;background-size: 100% 100%;width: 15px;height: 15px;
	}
</style>
